<template>
  <div class='container'>
    <Navbar title="在线支付"
            class="navbar"></Navbar>
    <div class="countdown">
      <p>支付剩余时间</p>
      <van-count-down :time="time"
                      @finish="finish" />
    </div>
    <div class="pay-type">
      <span>选择支付方式</span>
    </div>
    <van-cell title="支付宝"
              center
              class="zhifu">
      <template #icon>
        <img src="@/assets/images/zfb.png">
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-checkbox v-model="zfbchecked"
                      checked-color="#4cd964" />
      </template>
    </van-cell>
    <van-cell title="微信"
              center
              class="zhifu">
      <template #icon>
        <img src="@/assets/images/vx.png">
      </template>
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-checkbox v-model="vxchecked"
                      checked-color="#4cd964" />
      </template>
    </van-cell>
    <van-button size="large"
                style="width:90%; margin:20px;">确认支付</van-button>
    <van-dialog v-model='showDialog'
                class="dialog"
                @confirm='isOK'>
      <template #default>
        <img src="@/assets/images/jinggao.png">
        <p>支付失败,请稍后重试</p>

      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      time: 10 * 1000,
      vxchecked: false,
      zfbchecked: false,
      showDialog: false
    }

  },
  computed: {},
  methods: {
    finish () {
      this.showDialog = true
    },
    isOK () {
      this.$router.push('/order')
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  .navbar {
    margin: 0;
  }
  .countdown {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    background-color: #fff;
    p {
      margin: 0;
      color: #666;
      font-size: 14px;
    }
    .van-count-down {
      font-size: 35px;
      color: #333;
      margin-top: 15px;
    }
  }
  .pay-type {
    width: 100%;
    margin: 10px 8px;
  }
  .zhifu {
    img {
      margin-right: 5px;
      width: 50px;
      height: 50px;
    }
  }
  .van-button {
    background-color: #4cd964;
    border-radius: 5px;
    .van-button__text {
      color: #fff;
      font-weight: 700;
      font-size: 16px;
    }
  }
  /deep/.dialog {
    text-align: center;
    img {
      width: 80px;
      height: 80px;
      margin-top: 10px;
    }
    .van-button--default {
      background-color: #4cd964;
    }
    .van-dialog__confirm {
      color: #fff;
      font-size: 19px;
      font-weight: 700;
    }
  }
}
</style>
